<template>
  <table cellpadding="0" cellspacing="0" border="0"
         class="display table-bordered table-striped"
         style="width:100%;">
  </table>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch, Emit} from 'vue-property-decorator'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'datatables/media/css/jquery.dataTables.min.css'
  import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css'
  import 'bootstrap'
  import 'datatables'
  import 'datatables.net-responsive-bs4'
  import 'datatables.net-buttons-bs4'
  import bfI18n from '../../modules/i18n'
  import bfExport from '../../utils/bf-export'

  @Component
  export default class bfDataTable extends Vue {
    dt: any = null;
    rowData: any = null;

    @Prop({
      default: () => {
        return []
      }
    })
    dtData: any[];
    @Prop({
      default: () => {
        return []
      }
    })
    dtColumns: any[];
    @Prop({
      default: () => {
        return {}
      }
    })
    dtOption: object;

    @Watch('dtData', {deep: true})
    watchData(val) {
      this.redrawTable();
    }


    @Emit('rowClick')
    rowClick(data: object) {
    }

    @Emit('rowEdit')
    rowEdit(data: object, type?: number) {
    }

    @Emit('rowDel')
    rowDel(data: object) {
    }


    initDataTable(): void {
      let table: any = $(this.$el);
      this.dt = table.DataTable(this.dtopts);
    }

    exportData(): void {
      bfExport.exportData(this.dtopts.data);
    }

    redrawTable(): void {
      if (!this.dt) {
        console.error("can not found dt!");
        return
      }
      this.dt.clear();
      this.dt.rows.add(this.dtData);
      this.dt.draw(false);
      this.dt.columns.adjust();
    }

    tableClickEvent(): void {
      let that = this;
      $(this.$el).find('tbody').on('click', 'tr', function (e) {
        // 阻止事件冒泡
        e.stopPropagation();
        if (!$(this).attr('role')) {
          return
        }
        // 给表格添加行选中样式
        $(that.$el).find('tbody tr.selected').removeClass('selected');
        $(this).addClass('selected');
        // 读取表格选中行的数据
        let data = null;
        let __this = $(this).parents('tr').prev();
        if (__this.length > 0) {
          data = that.dt.row(__this[0]).data();
        } else {
          data = that.dt.row(this).data();
        }
        // 向父组件传递表格选中的数据
        that.rowData = data;
        that.rowClick(data);
      });
    }

    mounted(): void {
      this.initDataTable();
    }

    get dtopts() {
      return {
        columns: [
          {
            title: "id",
            data: null,
            render: (data, type, row, meta) => {
              return meta.row + 1
            },
            width: "30px"
          }
        ].concat(this.dtColumns),
        data: this.dtData,
        columnDefs: [],
        order: [],
        deferRender: true,
        destory: true,
        autoWidth: true,
        searching: true,
        info: true,
        scrollY: "350px",
        scrollX: true,
        buttons: [
          {
            text: '<i class="el-icon-plus"></i>',
            titleAttr: bfI18n.t('dataTable.add'),
            action: (e, dt, note, config) => {
              this.rowEdit(null, 1);
            }
          },
          {
            text: '<i class="el-icon-edit"></i>',
            titleAttr: bfI18n.t('dataTable.edit'),
            action: (e, dt, note, config) => {
              if (this.rowData) {
                this.rowEdit(this.rowData, 2);
              } else {
                console.warn("unselect row data");
              }
            }
          },
          {
            text: '<i class="el-icon-delete"></i>',
            titleAttr: bfI18n.t('dataTable.delete'),
            action: (e, dt, note, config) => {
              if (this.rowData) {
                this.rowDel(this.rowData)
              } else {
                console.warn("unselect row data");
              }
            }
          },
          {
            text: '<i class="el-icon-download"></i>',
            titleAttr: bfI18n.t('dataTable.export'),
            action: (e, dt, note, config) => {
              this.exportData();
              bfExport.exceljsExport(dt.buttons.exportData());
            }
          }
        ],
        responsive: true,
        stateSave: true,
        // 禁止分布
        // paging:false,
        pagingType: "simple_numbers",
        lengthMenu: [[100, 200, 500, 1000, -1], [100, 200, 500, 1000, bfI18n.t('dataTable.all')]],
        dom: "<'dataTables_head'Bif>t<'dataTables_foot'lp>",
        language: bfI18n.t('dtlangs'),
        initComplete: (settings, json) => {
          // this.detailHead && this.loadChildTable();
          this.tableClickEvent();
        },
        ...this.dtOption
      }
    }
  }
</script>

<style lang="scss">
  @import "../../scss/glob";

  .bf-main-body {
    table.dataTable thead th, table.dataTable thead td, .dataTables_wrapper.no-footer .dataTables_scrollBody {
      border-bottom: 1px solid #ddd;
    }
    .dataTables_wrapper {
      display: flex;
      flex-direction: column;

      .dataTables_head, .dataTables_scroll, .dataTables_foot {
        flex: auto;
      }
      .dataTables_head, .dataTables_foot {
        display: flex;
        flex-wrap: wrap;
        line-height: 30px;

        label {
          position: relative;
          width: 100%;
          margin: 0;
          font-weight: unset;

          input, select {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: none;
            padding: 0 10px 0 30px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
            margin: 0;
            &:hover {
              border-color: #c0c4cc;
            }
            &:focus {
              border-color: #409eff;
            }
          }
        }
      }
      .dataTables_head {
        margin-bottom: 2px;

        .dt-buttons, .dataTables_info, .dataTables_filter {
          flex: auto;
          align-items: center;
          align-self: center;
        }

        .dt-buttons {
          order: 1;

          .btn-secondary {
            outline: none;
            color: $color-white;
            background-color: $color-primapy;
          }
          .btn-secondary:focus, .btn-secondary:hover {
            background: $color-primapy-focus;
            border-color: $color-primapy-focus;
          }
          .btn-secondary:active {
            background: $color-primapy-active;
            border-color: $color-primapy-active;
          }
          .btn-secondary:not(:first-child):not(:last-child) {
            border-left-color: $color-primapy-focus;
            border-right-color: $color-primapy-focus;
          }
          .btn-secondary:first-child {
            border-right-color: $color-primapy-focus;
          }
          .btn-secondary:last-child {
            border-left-color: $color-primapy-focus;
          }
        }
        .dataTables_info {
          order: 2;
          padding: 0;
        }
        .dataTables_filter {
          order: 3;
          max-width: 260px;

          .el-icon-search {
            position: absolute;
            top: 50%;
            left: 8px;
            transform: translateY(-50%);
            color: #c0c4cc;
          }
        }
      }

      .dataTables_scroll {
        .dataTable thead th, .dataTable thead td, .dataTable tbody th, .dataTable tbody td {
          padding: 6px 10px;
          line-height: 20px;
          height: 20px;
        }
        .dataTable thead .action-btns, .dataTable tbody .action-btns {
          padding: 0 10px;
        }

        .dataTables_scrollBody {
          .el-button {
            color: $color-white;
          }
          .el-button.is-circle {
            padding: 5px;
          }
          .dataTable tbody tr:hover {
            background-color: #efefef;
          }
          .dataTable tbody tr.selected {
            background-color: #B0BED9;
          }
        }
      }

      .dataTables_foot {
        margin-top: 2px;

        .dataTables_length, .dataTables_paginate {
          flex: auto;
          align-items: center;
        }

        .dataTables_length {
          order: 1;
          align-self: left;

          label {

            select {
              width: unset;
              padding: 0 10px;
            }
          }
        }

        .dataTables_paginate {
          padding-top: 0;
          align-self: right;
          order: 2;

          .paginate_button {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 7px 15px;
            font-size: 14px;
            border-radius: 4px;

            &:hover, &:focus {
              color: $color-primapy !important;
              border-color: #c6e2ff !important;
              background-color: #ecf5ff !important;
            }
            &:active {
              border-color: $color-primapy-active !important;
              color: $color-primapy-active !important;
            }

            .bf-icon {
              font-size: 12px;
            }
          }

          .paginate_button.disabled {
            color: #c0c4cc !important;
            cursor: not-allowed !important;
            background-image: none !important;
            background-color: #fff !important;
            border-color: #ebeef5 !important;
          }
          .paginate_button.current {
            background: #3a8ee6 !important;;
            border-color: #3a8ee6 !important;;
            color: #fff !important;
          }
        }
      }
    }
  }
</style>
